<template>
  <div class="infinite-container bgJybg">
    <div class="pageTop">
      <h2>{{mainInfo.realname}}</h2>
      <h4>{{mainInfo.departmentName}}</h4>
      <span class="circleBtn">{{mainInfo.inspectName}}</span>
    </div>
    <div class="flex flex_between part1" >
      <p>
        <span class="fGray">送检医生</span>
        <span class="fGreen">{{mainInfo.doctorName}}</span>
      </p>
      <p>
        <span class="fGray">送检时间</span>
        <span class="fGreen">{{mainInfo.examTime | format('yyyy-MM-dd hh:mm:ss')}}</span>
      </p>
    </div>
    <ul class="part2">
      <li class="t3">
        <i>检查项目</i>
        <span>结果</span>
        <b>参考范围</b>
      </li>
      <li v-for="item in mainInfo.inspectionItems" :key="item.itemName">
        <i>{{item.itemName}}</i>
        <span>
          {{item.result}}{{item.itemUnit}}
          <!--1:偏高-->
          <img src="../../assets/images/up.png" alt="" v-show="item.abnormal === '1'">
          <!--2:偏低-->
          <img src="../../assets/images/up.png" alt="" v-show="item.abnormal === '2'" class="arrdown">
        </span>
        <b class="fGray">{{item.refRange}}</b>
      </li>
    </ul>
    <div class="flex flex_between part1" >
      <p>
        <span class="fGray">报告医生</span>
        <span class="fGreen">{{mainInfo.reporter}}</span>
      </p>
      <p>
        <span class="fGray">报告时间</span>
        <span class="fGreen">{{mainInfo.reportTime}}</span>
      </p>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        // familyPerson: JSON.parse(sessionStorage.familyPerson),
        mainInfo: {},
        testData: {
          realname: '路人甲',
          departmentName: '血液科',
          inspectName: '血常规',
          reportTime: '2019-03-13 14:56:12',
          doctorName: '张的卫',
          reporter: '六名',
          examTime: '2019-03-13 14:33:12',
          inspectionItems: [
            {
              itemName: '红细胞分布宽度(CV)',
              result: '12.9',
              itemUnit: '%',
              refRange: '10.9-15.4'
            },
            {
              itemName: '红细胞分布宽度(CV)',
              result: '12.9',
              itemUnit: '%',
              refRange: '10.9-15.4'
            },
            {
              itemName: '红细胞分布宽度(CV)',
              result: '12.9',
              itemUnit: '%',
              refRange: '10.9-15.4'
            },
            {
              itemName: '红细胞分布宽度(CV)',
              result: '12.9',
              itemUnit: '%',
              refRange: '10.9-15.4'
            },
            {
              itemName: '红细胞分布宽度(CV)',
              result: '12.9',
              itemUnit: '%',
              refRange: '10.9-15.4'
            },
            {
              itemName: '红细胞分布宽度(CV)',
              result: '12.9',
              itemUnit: '%',
              refRange: '10.9-15.4'
            }
          ]
        }
      }
    },
    components: {

    },
    mounted () {
      // console.log(JSON.stringify(this.$route.query))
      // this.mainInfo = this.$route.query
      this.$store.commit('UPDATE_LOADING')
      setTimeout(() => {
        this.$store.commit('UPDATE_LOADING')
        this.mainInfo = this.testData
      }, 1200)
    },
    methods: {

    }
  }
</script>

<style scoped lang="less">
  @import "../../common/css/flex.css";
  @import "../../common/css/vars";
  .bgJybg{
    background-image: url("../../assets/images/bg_jybg_xq.png");
    background-repeat: no-repeat;
    background-size:100%;
  }
  .pageTop{
    padding:26px 0 20px 0;
    text-align: center;
    color:white;
    h2,h4{
      font-weight:normal;
    }
    h4{
      padding:5px 0;
    }
  }
  .part1{
    background-color: white;
    padding:10px;
  }
  .fGreen{
    color:@color-primary
  }
  .fGray{
    color:@color-gray
  }
  .part2{
    background-color: white;
    margin:10px 0;
    li{
      display:flex;
      -webkit-display:flex ;
      // align-items:center;
      justify-content: space-around;
      border-bottom: 1px solid @color-border;
      padding:10px;
    }
    i{
      font-style:normal;
      flex-basis: 45%;
    }
    span{
      flex:1;
      img {
        vertical-align: middle;
      }
    }
    b{
      text-align: right;
      font-weight:normal;
      flex:1;
    }
  }
  .arrdown{
    transform:rotate(180deg);
  }
</style>
